<template>
  <div
    class="relative w-screen h-screen overflow-hidden text-gray-800 bg-gray-50 dark:bg-gray-900 dark:text-gray-200"
  >
    <div
      class="absolute top-[20px] right-[20px] flex items-center justify-between z-50 rounded-full py-[3px] bg-[var(--el-color-info-light-8)] space-x-4 w-[60px] h-[22px]"
      @click="toggleTheme"
    >
      <i
        class="icon-[ant-design--moon-filled] text-[#cfd3dc] size-[18px] absolute top-[50%] -translate-y-[50%] transition-all duration-300 ease-in-out ltor"
        v-show="!isDark"
      />

      <i
        class="icon-[ant-design--sun-filled] text-[#606266] size-[18px] absolute top-[50%] -translate-y-[50%] transition-all duration-300 ease-in-out ltorrrr"
        v-show="isDark"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
// 响应式数据
//系统主题亮色或暗色
const isDark = ref<boolean>(); //当前系统主题是否是暗黑
const systemPreference = ref(''); // 系统主题偏好
// 方法：检测系统主题偏好
const detectSystemPreference = () => {
  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    systemPreference.value = 'dark';
    isDark.value = true;
  } else {
    systemPreference.value = 'light';
    isDark.value = false;
  }
};

detectSystemPreference(); //初始化系统是否暗黑主题

const theme = ref('system'); // 当前主题模式
// 方法：应用主题到页面
const applyTheme = () => {
  const html = document.documentElement;
  if (theme.value === 'system') {
    // 跟随系统主题
    if (isDark.value) {
      html.classList.add('dark');
    } else {
      html.classList.remove('dark');
    }
  } else if (theme.value === 'dark') {
    html.classList.add('dark');
  } else {
    html.classList.remove('dark');
  }

  // 保存主题设置到本地存储
  localStorage.setItem('theme', theme.value);
};

applyTheme(); //初始化主题
console.log('当前主题', isDark.value);

// 方法：设置主题
const setTheme = (newTheme: string) => {
  theme.value = newTheme;
  applyTheme();
};
// 方法：切换主题
const toggleTheme = () => {
  if (theme.value === 'system') {
    // 如果当前是系统模式，切换到系统检测到的相反主题
    theme.value = systemPreference.value === 'dark' ? 'light' : 'dark';
    isDark.value = systemPreference.value === 'dark' ? false : true;
  } else {
    // 否则在亮色和暗黑之间切换
    theme.value = theme.value === 'light' ? 'dark' : 'light';
    isDark.value = theme.value === 'light' ? false : true;
  }

  applyTheme();
};

// 计算属性：显示当前主题状态
const themeDisplay = computed(() => {
  if (theme.value === 'system') {
    return `系统主题 (${systemPreference.value})`;
  }
  return theme.value === 'light' ? '亮色模式' : '暗黑模式';
});

// 监听系统主题变化
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
  // 如果当前是系统模式，应用新的系统主题
  if (theme.value === 'system') {
    applyTheme();
  }
});

// 初始化
onMounted(() => {
  // 检测系统主题偏好
  detectSystemPreference();

  // 从本地存储加载主题设置
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme) {
    theme.value = savedTheme;
  }

  // 应用主题
  applyTheme();
});
</script>

<style lang="scss">
.ltor {
  transform: translateX(5px);
}
.dark .ltor {
  transition: all 0.3s;
  transform: translateX(35px);
}
.rtol {
  transition: all 0.3s;
  transform: translateX(calc(100%_-_23px));
}
.activeRtol {
  left: 5px;
}
</style>
